<template>
  <div class="bg-primary h-screen flex justify-center items-center">
    <div class="shadow-2xl w-[521px] h-[656px] bg-white rounded-content-wrap px-[70px]">
      <div class="text-center flex items-center h-[140px]">
        <Logo class="w-[35px]"></Logo>
        <span class="text-[#959595] ml-6 text-[20px]">欢迎来到园查查产业平台</span>
      </div>

      <!-- Tab -->
      <ul class="flex space-x-8 mb-[40px]">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="currentIndex = index"
        >
          <div class="label">{{ item.label }}</div>
          <div class="line"></div>
        </li>
      </ul>

      <el-form v-show="currentIndex === 0" ref="form" :model="formValue" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="formValue.account" placeholder="请输入手机号或账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formValue.password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>

      <el-form v-show="currentIndex === 1" ref="phoneForm" :model="formPhone" :rules="rules">
        <el-form-item prop="phone">
          <el-input v-model="formPhone.phone"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="flex space-x-2">
            <el-input v-model="formPhone.captcha"></el-input>
            <el-button class="w-[150px] h-[53px]" @click="getCaptcha">{{
              showCount ? count : '获取验证码'
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>

      <div class="login-register">
        <div class="mb-[18px]">
          <el-button type="primary" class="w-full" @click="doLogin" @keyup.native.enter="doLogin"
            >登 录</el-button
          >
        </div>

        <div class="mb-2">
          <el-button class="w-full" @click="doRegister">申请试用</el-button>
        </div>
      </div>

      <div class="flex justify-center">
        <el-button type="text" @click="forgetPwd">忘记密码？</el-button>
      </div>

      <div class="flex justify-center items-center">
        <span class="text-[#6d7278]">登录即代表您已阅读并同意</span>
        <el-button type="text">用户服务协议</el-button>
        <span class="text-[#6d7278]">及</span>
        <el-button type="text">隐私政策</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { ILoginParams, IPhoneLoginParams, sendSms, ISmsParams } from '@/api/login'
import { ActionsType } from '@/actions/user'

// @ts-ignore
import Logo from '@/assets/svg/logo.svg?inline'
interface ITab {
  label: string
}

export default Vue.extend({
  name: 'Login',
  components: { Logo },
  layout: 'empty',
  data(): {
    formValue: ILoginParams
    formPhone: IPhoneLoginParams
    tabList: ITab[]
    currentIndex: number
    timer: number
    showCount: boolean
    count: number
  } {
    return {
      formValue: {
        account: '',
        password: '',
      },
      formPhone: {
        phone: '',
        captcha: '',
      },
      rules: {
        account: {
          required: true,
          message: '请输入账号',
          trigger: 'blur',
          whitespace: true,
        },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
        phone: {
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
          pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
        },
        captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
      },
      tabList: [{ label: '账号登录' }, { label: '验证码登录' }],
      currentIndex: 0,
      timer: -1,
      showCount: false,
      count: 60,
    }
  },
  methods: {
    forgetPwd() {
      this.$alert('请联系管理员', '提示', {
        confirmButtonText: '确定',
      })
    },
    doRegister() {
      this.$alert('请联系管理员', '提示', {
        confirmButtonText: '确定',
      })
    },
    async getCaptcha() {
      const { phone } = this.formPhone

      if (!phone.trim()) {
        this.$message.warning('手机号不能为空！')
      } else {
        this.getCode()

        const params: ISmsParams = {
          type: 1,
          phone: this.formPhone.phone,
        }
        const res = await sendSms(params)
        console.log(res)
      }
    },
    getCode() {
      const time = 60
      if (this.timer < 0) {
        this.count = time
        this.showCount = true
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= time) {
            this.count--
          } else {
            this.showCount = false
            clearInterval(this.timer)
            this.timer = -1
          }
        }, 1000)
      }
    },
    doLogin() {
      const { currentIndex } = this
      if (currentIndex === 0) {
        this.$refs.form.validate(async (valid: boolean) => {
          if (valid) {
            try {
              const res = await this.$store.dispatch(ActionsType.login, this.formValue)
              const menus = await this.$store.dispatch(ActionsType.setBaseInfo)
              this.$router.push(menus[0]?.children[0]?.path)

              console.log(res)
            } catch (error) {
              console.error(error)
            }
          }
        })
      } else {
        // @ts-ignore
        this.$refs.phoneForm.validate(async (valid: boolean) => {
          if (valid) {
            const res = await this.$store.dispatch(ActionsType.phoneLogin, this.formPhone)
            const menus = await this.$store.dispatch(ActionsType.setBaseInfo)
            this.showCount = false
            this.timer = -1
            clearInterval(this.timer)
            console.log(res)
            this.$router.push(menus[0]?.children[0]?.path)
          }
        })
      }
    },
  },
})
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 53px;
}
.login-register {
  .el-button {
    height: 53px;
  }
}

.line {
  @apply h-[3px] w-[0px] bg-transparent mx-auto transition-all duration-500;
}

.label {
  @apply text-[#373c51] text-[24px]  mb-[10px] cursor-pointer transition-all duration-500;
}

.active {
  .label {
    @apply text-primary transition-all font-semibold duration-500;
  }

  .line {
    @apply bg-primary transition-all duration-500 w-[90px];
  }
}
</style>
